<template>
    <div class="order-info"  style="position: relative">
        <img src="@/assets/images/order/SKQYF56HMQ6.jpg" alt="" class="order-info-img" v-if="sn == 'SKQYF56HMQ6'" @click="showInfo">
        <img src="@/assets/images/order/SCKGWG4QPYX.jpg" alt="" class="order-info-img" v-if="sn == 'SCKGWG4QPYX'" @click="showInfo">

        <img
              v-if="sn == 'SKQYF56HMQ6' && isShow == true"
              @click="cancleShow"
              src="@/assets/images/order/SKQYF56HMQ6-info.png"
              style="
                position: absolute;
                width: 1910px;
                height: 1000px;
                z-index: 10; /* 确保在最上层 */
              "
        />
        <img
              v-if="sn == 'SCKGWG4QPYX' && isShow == true"
              @click="cancleShow"
              src="@/assets/images/order/SCKGWG4QPYX-info.png"
              style="
                position: absolute;
                width: 1910px;
                height: 1000px;
                z-index: 10; /* 确保在最上层 */
              "
        />
    </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { ref } from 'vue'

const isShow = ref(false)

 const route = useRoute()
    
    // 获取参数
 const sn = route.params.sn

 const showInfo = () => {
      isShow.value = true
    }
 const cancleShow = () => {
      isShow.value = false
    }
</script>

<style>
.order-info{
    display: flex;


}
.order-info-img{
    width: 1920px;
    height: auto;
    overflow: auto;
}
</style>